<template>
    <div class="wrapper">
        <div class="cont" v-for="g in order.goods" @click="order.rid ? goToRefundDetail(order.rid) : goToOrderDetail(order)">
            <div class="cont-left">
                <image class="goods-img" resize="cover" :src="g.img || defaultImg"></image>
                <text class="text-detail font-msyhl">{{g.title}}</text>
            </div>

            <div class="cont-right">
                <text class="text-price font-msyhl">{{g.price | currency('¥')}}</text>
                <text class="text-num font-msyhl">&times;{{g.num}}</text>
                <text class="text-status font-msyhl" v-if="g.r_status">{{g.r_status}}</text>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .wrapper {
        align-items: stretch;
        background-color: #f8f8f8;
    }
    .cont {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .cont-left {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .goods-img {
        width: 150px;
        height: 150px;
    }
    .text-detail {
        width: 686px;
        padding-left: 16px;
        padding-right: 16px;
        lines: 2;
        text-overflow: ellipsis;
        font-size: 26px;
        color: #313131;
    }
    .cont-right {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .text-price {
        font-size: 26px;
        color: #313131;
    }
    .text-num {
        font-size: 26px;
        color: #8d8d8d;
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .text-status {
        font-size: 26px;
        color: #f6a623;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>
<script>
    import defaultImg from 'assets/images/default-img.png';
    import api from "api/api";
    import navigator from "utils/navigator";
    import route from 'constants/route';
    import constant from 'constants/constant';
    import modal from "utils/modal";

    export default{
        props: {
            order: {
                type: Object,
                required: true
            }
        },
        data(){
            return {
                defaultImg: defaultImg
            }
        },
        methods: {
            goToOrderDetail(order){
                let self = this;
                let options = {
                    classType: constant.Drawer_Class_Type,
                    url: route.order_detail,
                    title: "订单详情",
                    params: {
                        oid: order.transactionid
                    }
                };
                navigator.push(options);
            },
            goToRefundDetail(rid){
                let options = {
                    classType: constant.Drawer_Class_Type,
                    url: route.order_funddetail,
                    title: "退款详情",
                    params: {
                        rid: rid
                    }
                };
                navigator.push(options);
            }
        }
    }
</script>
